<template>
  <span :class="classes">
    <Icon class="left" v-if="prefix" :type="prefix"></Icon>
    <span class="content"><slot>默认文字</slot></span>
    <Icon class="right" v-if="clearable" type="icon-close" @click.stop="closeTag" />
  </span>
</template>

<script>
import { oneOf } from '../../../utils/assist'
import size from '../../../mixins/size'
import Icon from '../../icon'
export default {
  name: 'Tag',
  mixins: [size],
  components: {
    Icon
  },
  props: {
    type: {
      type: String,
      default: 'primary',
      validator (value) {
        return oneOf(value, ['primary', 'success', 'warning', 'error', 'normal'])
      }
    },
    radius: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    prefix: {
      type: String,
      default: null
    }
  },
  computed: {
    classes () {
      return [
        'sh-tag',
        `sh-tag-${this.type}`,
        {
          'sh-tag-radiu': this.radius,
          [`sh-tag-${this.sizes}`]: this.sizes
        }
      ]
    }
  },
  methods: {
    closeTag () {
      this.$emit('on-close')
    }
  }
}
</script>
